<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" top="10vh">
      <div class="content">
        <el-form ref="subform1" :model="form" :rules="rules">
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
            <el-input
              v-model="form.nickname"
              auto-complete="off"
              style="width:400px; margin-right:16px; margin-bottom:10px;"
              :disabled="isDisabled"
            />
          </el-form-item>
          <!-- 添加展示图 -->
          <el-form-item label="图片" :label-width="formLabelWidth" prop="dialogImageUrl">
            <el-upload
              action="https://mpingweb.yuepinyuemei.com/api/upload"
              :data="{
                dirPath: 'authentication',
                upload_status: true }"
              :multiple="false"
              :limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="upload_main"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="common.img_url+img_main" alt />
            </el-dialog>
            <img width="20%" :src="common.img_url+form.headImg" alt />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="closeMask">取 消</el-button>
        <el-button v-if="!isDisabled&&infos&&!infos.id" type="primary" plain @click="submitInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addMaterial } from "../../api/material";

export default {
  props: {
    isHidden: {
      type: Boolean,
      default: false,
    },
    detailInfo: {
      id: "",
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formLabelWidth: "120px",
      infos: this.detailInfo, // 传过来的信息
      form: {
        nickname: "", // 昵称
        headImg: "", // 图片
      },
      dialogVisible: false,
      img_main: "",
      dialogFormVisible: this.isHidden, // 是否显示弹出框
      dialogImageUrl: "",
      rules: {
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        dialogImageUrl: [
          {
            required: true,
            message: "图片不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    dialogFormVisible() {
      this.$emit("checkMask", this.dialogFormVisible);
    },
  },
  mounted() {
    // 说明是查看或者编辑 而不是添加
    if (this.infos && this.infos.id) {
      this.form.nickname = this.infos.nickname;
      this.form.headImg = this.infos.headImg;
    }
  },
  methods: {
    handleRemove() {
      this.img_main = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    closeMask() {
      this.$refs["subform1"].resetFields();
      this.dialogFormVisible = false;
      this.$emit("checkMask", this.dialogFormVisible);
    },
    handleChange(item) {},
    // 添加
    submitInfo() {
      if (this.checkInfo()) {
        // 提交表单 隐藏弹窗
        addMaterial({
          nickname: this.form.nickname,
          headImg: this.img_main,
        })
          .then((res) => {
            this.$message({
              showClose: true,
              message: "添加" + res.data.msg,
              type: "success",
            });
            this.$emit("refresh", {});
            this.closeMask();
          })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          });
      } else {
        // 弹出错误框
        this.$message({
          showClose: true,
          message: "请填写必要参数",
          type: "error",
        });
      }
    },
    // 检查参数
    checkInfo() {
      if (!this.img_main) {
        this.img_main = this.form.headImg;
      }
      if (!this.form.nickname || !this.img_main) {
        return false;
      } else {
        return true;
      }
    },
    upload_main(res) {
      this.img_main = res.data;
    },
  },
};
</script>
<style scoped>
.content {
  padding-right: 1%;
  height: 470px;
  max-height: 480px;
  overflow: auto;
  box-sizing: border-box;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 112px !important;
  height: 112px !important;
}
</style>
